<template>
  <el-dialog
  class="xczxstrtr"
  v-model="visible"
   :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false"
    :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
      label-width="120px">
      <el-form-item label=" 标题" prop="name">
        <el-input v-model="dataForm.name" placeholder="标题"></el-input>
      </el-form-item>

      <!-- <el-form-item label="浏览人数" prop="visitorNum">
        <el-input v-model="dataForm.visitorNum" placeholder="浏览人数"></el-input>
      </el-form-item> -->

      <el-row :gutter="20">
        <el-col :span="12">
        <el-form-item label="公司" prop="companyId">
        <el-select v-model="dataForm.companyId" placeholder="公司" class="w100" @change="xzcxtsxer">
          <el-option v-for="item in kxczxdf" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      </el-col>

      <el-col :span="12">
        <el-form-item label="招聘人" prop="sysUserId">
        <el-select v-model="dataForm.sysUserId" placeholder="招聘人" class="w100" @change="xzcxtsxer">
          <el-option v-for="item in kxcxzdf" :key="item.id" :label="item.realName" :value="item.id" />
        </el-select>
      </el-form-item>
      </el-col>

        <el-col :span="12">
          <el-form-item label=" 日领薪酬 " prop="pay">
            <div class=" display-flex">
              <div class=" flex-1">
                <el-input v-model="dataForm.pay" placeholder="日领薪酬"></el-input>
              </div>
              <span class="ml10">元</span>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="综合薪水" prop="payOverall">
            <div class=" display-flex">
              <div class=" flex-1">
                <el-input v-model="dataForm.payOverall" placeholder="综合薪水"></el-input>
              </div>
              <span class="ml10">元</span>
            </div>
          </el-form-item>
        </el-col>


        <el-col :span="10">
          <el-form-item label="招聘时间" prop="jobDate">
            <el-date-picker format="YYYY-MM-DD" v-model="dataForm.jobDate" type="date" placeholder="请选择招聘时间" />
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="招聘类型" prop="type">
            <el-select v-model="kxcdfft" multiple placeholder="招聘类型" class="w100">
              <el-option v-for="item in jjxcf" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="16">
          <el-form-item label="标签">
            <div class=" display-flex gap-2">
              <el-tag v-for="tag in dynamicTags" :key="tag" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
              <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" class="w-20" size="small"
                @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
              <el-button v-else class="button-new-tag" size="small" @click="showInput">
                + 添加标签
              </el-button>
            </div>
          </el-form-item>



        </el-col>
        <el-col :span="8">
          <el-form-item label="推荐职位" prop="companyAddr">
            <div  class="w100">
              <el-radio-group v-model="dataForm.isGood">
                <el-radio :label="true">推荐</el-radio>
                <el-radio :label="false">不推荐</el-radio>

              </el-radio-group>
            </div>

          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="缩略图" prop="img">
            <div class="xzcsretrt">
              <dimg :dximg="dataForm.img" @getimg="xzczxtrt"></dimg>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="轮播图" prop="img">
            <div class="w100" v-if="dataForm.banner">
              <dimgduoge :dximg="dataForm.banner" @getimg="xzczxtrtbanner"></dimgduoge>
            </div>
            <div class="w100" v-else>
              <dimgduoge :dximg="dataForm.banner" @getimg="xzczxtrtbanner"></dimgduoge>
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-tabs type="border-card">
        <el-tab-pane label="薪资待遇">
          <el-form-item label="发薪日">
            <el-input v-model="dataForm.payDate" placeholder="发薪日"></el-input>
          </el-form-item>
          <el-form-item label="薪资详情">
            <el-input v-model="dataForm.payContent" placeholder="薪资详情"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="工作环境">
          <el-form-item label="班别">
            <el-input v-model="dataForm.classContent" placeholder="班别"></el-input>
          </el-form-item>

          <el-form-item label="着装">
            <el-input v-model="dataForm.dressing" placeholder="着装"></el-input>
          </el-form-item>
          <el-form-item label="站坐 ">
            <el-input v-model="dataForm.posture" placeholder="站坐 "></el-input>
          </el-form-item>

        </el-tab-pane>
        <el-tab-pane label="招聘要求">
          <el-form-item label="年龄">
            <el-input v-model="dataForm.ageContent" placeholder="年龄"></el-input>
          </el-form-item>
          <el-form-item label="身份证">
            <el-input v-model="dataForm.idCard" placeholder="身份证"></el-input>
          </el-form-item>
          <el-form-item label="纹身">
            <el-input v-model="dataForm.tattoo" placeholder="纹身"></el-input>
          </el-form-item>
          <el-form-item label="英文">
            <el-input v-model="dataForm.english" placeholder="英文"></el-input>
          </el-form-item>

        </el-tab-pane>
        <el-tab-pane label="企业介绍">
          <el-form-item label="公司简介">
            <el-input type="textarea" rows="10" v-model="dataForm.companyContent" placeholder="公司简介"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="工作地点">
          <el-form-item label="厂址">
            <el-input v-model="dataForm.jobAddress" placeholder="工作地址"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>


      <!--
      <el-form-item label="招聘内容" prop="content">
        <el-input v-model="dataForm.content" placeholder="招聘内容"></el-input>
      </el-form-item>
      <el-form-item label="缩略图" prop="img">
        <el-input v-model="dataForm.img" placeholder="缩略图"></el-input>
      </el-form-item>
      <el-form-item label="标签" prop="tag">
        <el-input v-model="dataForm.tag" placeholder="标签"></el-input>
      </el-form-item>

      <el-form-item label="薪水类型（1日 2周 3 月 4年）字典 pay_type" prop="payType">
        <el-input v-model="dataForm.payType" placeholder="薪水类型（1日 2周 3 月 4年）字典 pay_type"></el-input>
      </el-form-item> -->











    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">确定</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import baseService from "@/service/baseService";
import { dxget, zkjsd,transferTimeYMD } from "@/utils/utils"
import { ElMessage } from "element-plus";
import dimg from "@/components/dimg.vue";
import dimgduoge  from "@/components/dimgduoge.vue";
const emit = defineEmits(["refreshDataList"]);

const visible = ref(false);
const dataFormRef = ref();
const dynamicTags = ref([])
const inputValue = ref('')
const kxcxzdf = ref([])
const kxczxdf = ref([])
const inputVisible = ref(false)
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}
const handleInputConfirm = () => {
  if (inputValue.value) {
    dynamicTags.value.push(inputValue.value)
  }
  inputVisible.value = false
  inputValue.value = ''
}
const showInput = () => {
  inputVisible.value = true
  nextTick(() => {
    InputRef.value!.input!.focus()
  })
}
const kxcdfft = ref([])
const dataForm = reactive({
  id: '', companyId: '', visitorNum: '', jobDate: '', name: '', type: '', content: '', img: '', tag: '', pay: '', payOverall: '', payType: '', payDate: '', payContent: '', classContent: '', dressing: '', posture: '', ageContent: '', idCard: '', tattoo: '', english: '', companyContent: '', jobAddress: '', createTime: '', updateTime: '', createOwner: '', updateOwner: ''
});

const jjxcf = ref([])
const xzczxtrt = (data) => {
  dataForm.img = data
}
const rules = ref({
  companyId: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  visitorNum: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  jobDate: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  sysUserId: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],



  name: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  img: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  tag: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  pay: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  payOverall: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  payType: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  payDate: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  payContent: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  classContent: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  dressing: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  posture: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  ageContent: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  tattoo: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  english: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  companyContent: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  jobAddress: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  createTime: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  updateTime: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  createOwner: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ],
  updateOwner: [
    { required: true, message: '必填项不能为空', trigger: 'blur' }
  ]
});

const injxsd = async () => {
  const resd = await dxget("/sys/tmcompany/option")
  kxczxdf.value = resd
}
injxsd()

const xcxrerty = async () => {
  const {list} = await dxget("/sys/user/page",{
    roleIdList:'1766444837311168514'
  })
console.log(list);
kxcxzdf.value = list
console.log('8888');
}
xcxrerty()



const getsd = async () => {
  jjxcf.value = []
  const { list } = await zkjsd("1765699469696520194")
  list.map(a => {
    jjxcf.value.push({
      label: a.dictLabel,
      value: a.dictValue
    })
  })
}
getsd()

const init = (id?: number) => {
  visible.value = true;
  dataForm.id = "";
  kxcdfft.value = ""
  dynamicTags.value = []
  dataForm.isGood = false
  dataForm.banner =null
  // 重置表单数据
  if (dataFormRef.value) {

    dataFormRef.value.resetFields();
  }

  if (id) {
    getInfo(id);
  }
};

// 获取信息
const getInfo = (id: number) => {
  baseService.get("/api/job/" + id).then((res) => {
    Object.assign(dataForm, res.data);

    try {
      kxcdfft.value = dataForm.type.split(",")
    } catch (e) {

    }
    try {
      dynamicTags.value = dataForm.tag.split(",")
    } catch (e) {

    }
  });
};

const xzcxtsxer = async(data)=>{
  console.log(data);
  const jxmd = await dxget("/sys/tmcompany/page",{
    id:data
  })
  const jmxdf = jxmd.list[0]
  dataForm.companyContent = jmxdf.content
  dataForm.jobAddress = jmxdf.companyAddr
}


// 表单提交
const dataFormSubmitHandle = () => {
  dataForm.type = kxcdfft.value.join(",")
  try {
    dataForm.tag = dynamicTags.value.join(",")
  } catch (e) {

  }

  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false;
    }
    dataForm.jobDate =  transferTimeYMD(dataForm.jobDate)
    console.log(dataForm.type);

    (!dataForm.id ? baseService.post : baseService.put)("/api/job", dataForm).then((res) => {
      ElMessage.success({
        message: '成功',
        duration: 500,
        onClose: () => {
          visible.value = false;
          emit("refreshDataList");
        }
      });
    });
  });
};

defineExpose({
  init
});
const xzczxtrtbanner = (data)=>{
  // banner
  const kcvds = []

  data.map(a=>{
    kcvds.push(a.url)
  })
  dataForm.banner = kcvds.join(",")
  console.log(data);
  console.log( dataForm.banner );
console.log('99999');
}
</script>
